<template>
  <div class="event-container">
    <div class="event-header van-hairline--bottom">
      <van-dropdown-menu :overlay="false">
        <van-dropdown-item
          :value="categoryId"
          :options="categorys"
          @open="onOpen"
          @opened="isOpened"
        />
      </van-dropdown-menu>
      <van-search
        :value="value"
        placeholder="请输入搜索关键词"
        use-action-slot
        bind:search="onSearch"
        class="keyword-search"
        custom-class=""
      >
        <view
          slot="action"
          bind:tap="onSearch"
        >搜索</view>
      </van-search>
    </div>
    <list-scroll-view
      v-model="refreshing"
      @refresh="onRefresh"
      @load="onLoad"
    >
      <van-card
        tag="推荐"
        :desc="item.begintime"
        :title="item.name"
        :thumb="item.thumb"
        thumb-mode="aspectFill"
        v-for="(item, index) in list"
        :key="index"
        custom-class="event-list-item van-hairline--bottom"
        @click="onClickViewEvent(item.id)"
      >
        <view
          slot="bottom"
          class="van-card--bottom"
        >
          <van-icon name="like" /> 1922关注
        </view>
        <view
          slot="footer"
          class="van-card--footer"
        >
          <van-tag
            round
            color="#f2826a"
            text-color="#ad0000"
          >报名中</van-tag>
          <van-tag
            round
            color="#f2826a"
          >一键报名</van-tag>
        </view>
      </van-card>
    </list-scroll-view>
  </div>
</template>

<script>
import card from '@/components/card'
import ListScrollView from '@/components/listScrollView/index'
import { getMatchList } from '@/api'

export default {
  components: {
    card,
    ListScrollView
  },

  data () {
    return {
      id: 0,
      categoryId: 0,
      refreshing: false,
      triggered: false,
      freshing: false,
      categorys: [
        { text: '全部分类', value: 0 },
        { text: '能源', value: 1 },
        { text: '计算机', value: 2 },
        { text: '生物科技', value: 3 },
        { text: '海洋', value: 4 },
        { text: '医疗健康', value: 5 },
        { text: '教育', value: 6 },
        { text: '金融', value: 7 }
      ],
      list: [], // 列表数据
      page: 1, // 当前页数
      meta: {
        totalCount: 0,
        pageCount: 0,
        currentPage: 0,
        perPage: 0
      }
    }
  },
  onLoad (option) {
    console.log(option)
    if (option.id) {
      this.categoryId = parseInt(option.id)
    }
  },
  created () {
    console.log('event/index created')
  },
  beforeMount () {
    this.getList()
  },
  mounted () {
    // 创建节点选择器
    var query = wx.createSelectorQuery()
    // 选择id
    query.select('#test').boundingClientRect()
    query.exec(function (res) {
      // res就是 所有标签为mjltest的元素的信息 的数组
      console.log('event/index mounted', res)
    })
  },
  methods: {
    onClickViewEvent (id) {
      console.log('event/index onClickViewEvent', id)
      wx.navigateTo({
        url: '/pages/submatch/index/main?id=' + id
      })
    },
    onOpen () {
      console.log('onOpen ....')
    },
    isOpened () {
      console.log('event/index isOpened')
    },
    lower () {
      console.log('event/index lower')
    },
    scroll () {
      console.log('event/index scroll')
    },
    // 获取数据方法
    getList () {
      console.log('event/index getList')
      const that = this
      that.refreshing = false
      let startTime = new Date()
      let params = {
        page: that.page // 传递页码
      }
      getMatchList(params).then(res => {
        console.log('data', res)
        // 关闭下拉刷新动画
        wx.stopPullDownRefresh()
        // 返回的数据
        const data = res.data

        console.log('data', data)

        let itemCount = data.items.length
        if (itemCount > 0) {
          if (that.page > 1) {
            that.list.push(...data.items)
          } else {
            that.list = data.items
          }
        }
        that.meta = data.meta

        let endtime = new Date()
        let duration = endtime - startTime
        if (duration < 1500) {
          console.log('duration', duration)
          setTimeout(() => {
            that.refreshing = true
          }, 1500 - duration)
        } else {
          that.refreshing = true
        }
        console.log('change refreshing to', that.refreshing)
        that.triggered = false
        that.freshing = false
      })
    },

    onRefresh () {
      // 初始化页码
      this.page = 1
      this.getList()
    },
    // 上拉加载
    onLoad () {
      // 执行上拉执行的功能
      if (this.meta.pageCount <= this.meta.currentPage) {
        console.log('数据加载完了')
      } else {
        // 下一页
        this.page = this.page + 1
        this.getList()
      }
    }
  }
}
</script>

<style lang="less">
page {
  height: 100%;
}
.event-container {
  padding-top: 54px;
  position: relative;
  height: 100%;
}
.van-icon,
.van-icon::before {
  display: block !important;
}
.event-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  display: flex;
  .keyword-search {
    flex-grow: 1;
  }
  .van-dropdown-menu {
    box-shadow: none;
    width: 80px;
  }
}
.van-overlay {
  background: transparent;
}
.event-list {
  height: 100%;
}
.event-list-item {
  &.van-card {
    padding: 15px;
    background: transparent;
  }
  .van-card__img {
    border-radius: 5px;
  }
  .van-card__title {
    font-size: 16px;
    line-height: 24px;
    font-weight: normal;
  }
  .van-card__desc {
    font-size: 10px;
  }
  .van-card__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .van-card--bottom {
    color: #bccce5;
    display: flex;
    align-items: center;
    .van-icon {
      margin-right: 3px;
    }
  }
  .van-card--footer {
    padding: 5px 5px 0 96px;
    text-align: left;
    display: flex;
    align-items: center;
    .van-tag {
      margin-right: 5px;
    }
  }
}

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}

.log-item {
  margin: 10rpx;
}
</style>
